<!DOCTYPE html>
<html style="height: 90%" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>其他信息</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
	<link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
</head>
<body class="childrenBody" style="height: 90%; margin: 0">
<div class="layui-row layui-col-space20 panel_box">
	<div class="panel layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg3">
		<a href="javascript:;">
			<div class="panel_icon layui-bg-blue">
				<i  class="layui-anim seraph"><i class="layui-icon layui-icon-gouwuche" aria-hidden="true" style="color:white"></i></i>
			</div>
			<div class="panel_word housesAll">
				<span></span>
				<cite>总房源数量</cite>
			</div>
		</a>
	</div>
	<div class="panel layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg3">
		<a href="javascript:;">
			<div class="panel_icon layui-bg-green">
				<i class="layui-anim seraph"><i class="layui-icon layui-icon-shujufenxi" aria-hidden="true" style="color:white"></i></i>
			</div>
			<div class="panel_word staffAll">
				<span></span>
				<cite>员工数量</cite>
			</div>
		</a>
	</div>
	<div class="panel layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg3">
		<a href="javascript:;">
			<div class="panel_icon layui-bg-orange">
				<i class="layui-anim seraph"><i class="layui-icon layui-icon-yonghuzu" aria-hidden="true" style="color:white"></i></i>
			</div>
			<div class="panel_word customerAll">
				<span></span>
				<cite>用户数量</cite>
			</div>
		</a>
	</div>
	<div class="panel layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg3">
		<a href="javascript:;">
			<div class="panel_icon layui-bg-red">
				<i class="layui-anim seraph"><i class="layui-icon layui-icon-yonghu" aria-hidden="true" style="color:white"></i></i>
			</div>
			<div class="panel_word entrustAll">
				<span></span>
				<cite>总委托量</cite>
			</div>
		</a>
	</div>
</div>
<!-- 搜索条件开始 -->
<form class="layui-form" method="post" id="searchFrm">
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">选择年份:</label>
			<div class="layui-input-inline">
				<input type="text" class="layui-input" id="year"  readonly="readonly" placeholder="yyyy">
			</div>
		</div>
		<div class="layui-inline">
			<button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
		</div>
	</div>
</form>
<!-- 搜索条件结束 -->
<div id="container" style="height: 100%"></div>
<script type="text/javascript" th:src="@{/js/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
	layui.use(['form','element','layer','jquery', 'laydate'],function(){
		var form = layui.form,
		layer = parent.layer === undefined ? layui.layer : top.layer,
		element = layui.element;
		$ = layui.jquery;
		var laydate = layui.laydate;

		laydate.render({
			elem:'#year',
			type:'year',
			value:new Date()
		});

		//icon动画
		$(".panel a").hover(function(){
			$(this).find(".layui-anim").addClass("layui-anim-scaleSpring");
		},function(){
			$(this).find(".layui-anim").removeClass("layui-anim-scaleSpring");
		})
		$(".panel a").click(function(){
			parent.addTab($(this));
		})

		//客户数量
		$.get("/admin/analysis/countCustomer",function(data){
			$(".customerAll span").text(data.count);
		})

		//员工数量
		$.get("/admin/analysis/countStaff",function(data){
			$(".staffAll span").text(data.count);
		})

		//房屋数量
		$.get("/admin/analysis/houseNumber",function(data){
			$(".housesAll span").text(data.count);
		})

		//委托数量
		$.get("/admin/analysis/entrustNumber",function(data){
			$(".entrustAll span").text(data.count);
		})

		$("#doSearch").click(function(){
			getStaff();
		});

		function getStaff() {
			var year = $("#year").val();
			$.get("/admin/analysis/loadNewOrder",{year:year}, function (data) {
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				var option = null;
				option = {
					title: {
						text: '新房每月销售额',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					xAxis: {
						type: 'category',
						data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: data,
						type: 'line'
					}]
				};
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			})
		}
		$(function(){
			getStaff();
		})
	})
</script>
</body>
</html>